const svgInfo = {};
svgInfo.svg = d3.select("#svgcanvas")
let multiple = 178,
    charging = './img/charging.png',
    che1 = './img/1.png',
    che2 = './img/2.png',
    che3 = './img/3.png',
    che4 = './img/4.png',
    site = './img/site.png',
    gif = './img/gif.gif',
    rackImg = './img/rack.png',
    workStationImg = './img/workStation.png',
    cheRack = './img/cheRack.png',
    xOffset = -380,
    yOffset = 396,
    yOffsetNew = 664,
    eWidth = 0,
    eHeight = 0,
    svgHeight = 0,
    negative = -1;
svg = $('#svgcanvas')
svgInfo.width = -1134
svgInfo.height = -583
// svgInfo.width = svg.width() || eWidth;
// svgInfo.height = svg.height() || eHeight;
svgHeight = svgInfo.height
 screenWidth = $(window).width();
 console.log(screenWidth,'screenWidth');
 if(screenWidth > 1300){
	svgInfo.width = -440
	svgInfo.height = -180
	xOffset =  -20 
	yOffset = -50 
	yOffsetNew= 340 
	multiple = 158
 }else{
	multiple = 178
	svgInfo.width = -1134
	svgInfo.height = -583
	xOffset = -380
	yOffset = 396 
	yOffsetNew = 664
 }
function drawAxises() {
    svgInfo = {};
    svgInfo.svg = d3.select("#svgcanvas");
    svgInfo.dottedList = [];
    svgInfo.locationsLineList = [];
    d3.selectAll(".axis").remove();
    let tW = Math.round(svgInfo.width / 20)
    let tH = Math.round(svgInfo.height / 20)
    svgInfo.x = d3
        .scaleLinear()
        .domain([-svgInfo.width * 12.5, svgInfo.width * 12.5])
        .range([0, svgInfo.width]);
    svgInfo.y = d3
        .scaleLinear()
        .domain([svgInfo.height * 12.5, -svgInfo.height * 12.5])
        .range([0, svgInfo.height]);

    svgInfo.xAxis = d3
        .axisBottom(svgInfo.x)
        .ticks(tW)
        .tickSize(svgInfo.height)
        .tickPadding(8 - svgInfo.height);

    svgInfo.yAxis = d3
        .axisRight(svgInfo.y)
        .ticks(tH)
        .tickSize(svgInfo.width)
        .tickPadding(10 - svgInfo.width);
    svgInfo.gX = svgInfo.svg
        .append("g")
        .attr("class", "axis axis--x")
        .attr("color", "rgba(255,253,253,0)")
        .call(svgInfo.xAxis);
    svgInfo.gY = svgInfo.svg
        .append("g")
        .attr("class", "axis axis--y")
        .attr("color", "rgba(255,253,253,0)")
        .call(svgInfo.yAxis);
    svgInfo.line = d3
        .line()
        .x(function (d) {
            return d.x * 50;
        })
        .y(function (d) {
            return d.y * 50;
        });
}

// drawAxises()
//画点
function drawPoints(pointsList = []) {
    d3.selectAll(".scatterCmbo").remove();
    d3.selectAll(".text").remove();
    svgInfo.scatterCmbo = svgInfo.svg
        .selectAll("circle")
        .data(pointsList)
        .enter()
        .append("circle")
        .style("fill", "#6cff01")
        .attr("class", "scatterCmbo")
        .style('cursor', 'pointer')
        .attr("cx", function (d) {
            return d.y / multiple + svgInfo.width / 2;
        })
        .attr("cy", function (d) {
            return (d.x * negative / multiple + svgInfo.height);
        })
        .attr("r", function (d) {
            return 6;
        }).on('click', function ($event) {
            $emit('getPointInfo', $event, 'points')
        });
    svgInfo.text = svgInfo.svg
        .selectAll("g")
        .select(".text")
        .data(pointsList)
        .enter()
        .append("text")
        .text(function (d, e) {
            return d.name
        })
        .attr("x", function (d) {
            return (d.y / multiple + svgInfo.width / 2) - 10;
        })
        .attr("y", function (d) {
            return (d.x * negative / multiple + svgInfo.height) - 10;
        })
        .attr("class", "text")
        .attr("font-size", 12)
        .attr("fill", '#ff7200');
    //箭头
    d3.selectAll(".arrow").remove();
    d3.selectAll(".paths").remove();
    let marker = {};
    svgInfo.marker = svgInfo.svg
        .append("marker")
        .attr("id", "arrow")
        .attr("markerUnits", "strokeWidth") //设置为strokeWidth箭头会随着线的粗细发生变化
        .attr("viewBox", "0 0 12 12") //坐标系的区域
        .attr("refX", 6) //箭头坐标
        .attr("refY", 6)
        .attr("markerWidth", 8)
        .attr("markerHeight", 8)
        .attr("orient", "auto") //绘制方向，可设定为：auto（自动确认方向）和 角度值
        .append("path")
        .attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2") //箭头的路径
        .attr("fill", "#ff7101"); //箭头颜色
}


// 绘制箭头线
function drawPaths(pathsList = [], pointsList = []) {
    let arrA = []
    for (let j = 0; j < pathsList.length; j++) {
        let info = {
            ...pathsList[j]
        }
        info.id = pathsList[j].id
        for (let i = 0; i < pointsList.length; i++) {
            if (pointsList[i].id == pathsList[j].destinationPoint.id) {
                info.x2 = Number(pointsList[i].y)
                info.y2 = Number(pointsList[i].x)
            }
            if (pointsList[i].id == pathsList[j].sourcePoint.id) {
                info.x1 = Number(pointsList[i].y)
                info.y1 = Number(pointsList[i].x)
            }
        }

        arrA.push(info)
    }
    svgInfo.markerLine = []
    svgInfo.paths = []
    let val = {}
    arrA.map(item => {
        val = svgInfo.svg.append("line")
            .attr("x1", item.x1 / multiple + svgHeight)
            .attr("y1", item.y1 * negative / multiple + svgInfo.height / 2)
            .attr("x2", item.x2 / multiple + svgHeight)
            .attr("y2", item.y2 * negative / multiple + svgInfo.height / 2)
            .attr("stroke", "#ff7101")
            .attr("stroke-width", 2)
            .attr("marker-end", "url(#arrow)")

        svgInfo.markerLine.push(val)
    })
}

function drawLocations(locationsList = []) {
    //  绘制location点
    //**/图片
    let container = {},
        dottedList = [],
        locationsLine = {},
        lineGenerator = d3.line(),
        locationsLineList = [],
        that = this
    if (locationsList && locationsList.length) {
        locationsList.map(item => {
            let pathString = lineGenerator([
                    [item.y / multiple + 10 + svgInfo.width / 2, item.x * negative / multiple + svgInfo.height + 10
                    ],
                    [item.attachedLinks[0].y / multiple + svgInfo.width / 2, item
                        .attachedLinks[0].x * negative / multiple + svgInfo.height / 2
                    ]
                ]),
                path = svgInfo.svg.select('path').attr('d', pathString).style("stroke", 'red')
                    .attr('stroke-width', 1).attr('stroke-dasharray', '1,1');
            locationsLineList.push(path)
            container = svgInfo.svg.append("g")
                .attr("fill", "#ffffff")
                .attr("class", "all")
                .append("image")
                .attr("xlink:href", charging)
                .attr("x", -(item.y / multiple + svgInfo.width / 2))
                .attr("y", -(item.x * negative / multiple + svgInfo.height))
                .attr("width", 20)
                .attr("height", 20).on('click', function () {
                    $emit('getPointInfo', item, 'locations')
                });
            dottedList.push(container)
        })
    }
    svgInfo.dottedList = dottedList
    svgInfo.locationsLineList = locationsLineList
    if (locationsList) {
        svgInfo.locationsText = svgInfo.svg.select('g').selectAll("text")
            .data(locationsList)
            .enter()
            .append("text")
            .text(function (d, e) {
                return d.name
            })
            .attr("x", function (d) {
                return -(d.y / multiple + svgInfo.width / 2 - 20);
            })
            .attr("y", function (d) {
                return -(d.x * negative / multiple + svgInfo.height);
            })
            .attr("class", "text")
            .attr("text", "text")
            .attr("fill", "#ff7200")
            .attr("font-size", 12)
    }

    // routers()
}


//位置
function drawSite(info) {
    d3.selectAll(".siteImg").remove();
    let container = {}, y = 0, x = 0
    if (info && (info.x || info.y)) {
        let orientationAngle = info.orientationAngle ? -info.orientationAngle : 0,
            x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset),
            y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 8
        container = svgInfo.svg.append("g")
            .attr("fill", "#ffffff")
            .attr("class", "siteImg")
            .append("image")
            .attr("xlink:href", site)
            .attr("x", -(x - 12))
            .attr("y", -(y - 12))
            .attr("width", 20)
            .attr('transform', `rotate(${orientationAngle || 0},${x + xOffset} ,${y + yOffset})`)
        // .attr("x", item.x / multiple + svgHeight)
        // .attr("y", item.y * negative / multiple + svgInfo.height / 2)
    }

}

//小车位置
function vehicleSite(arr) {
    d3.selectAll(".cheImg").remove();
    d3.selectAll(".cheText").remove();
    d3.selectAll(".text").remove();
    d3.selectAll(".vehicleLine").remove();
    svgInfo.vehicleLine = []
    let container = {}, text = {},allowedOrderTypes='',cheImg=''
    arr.map(info => {
        allowedOrderTypes = info.allowedOrderTypes[0]
        if (allowedOrderTypes == '3T'){
            cheImg =che4
        }else if (allowedOrderTypes == '7T'){
            cheImg =che1
        }else if (allowedOrderTypes == '16T'){
            cheImg =che2
        }else if (allowedOrderTypes == '32T'){
            cheImg =che3
        }
        let x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset),
            y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 12,
            orientationAngle = info.orientationAngle ? -info.orientationAngle : 0
        // 计算 的中心点坐标
        var centerX =x  , centerY =y + 10 ,rotate =   180 - info.orientationAngle  
        container = svgInfo.svg.append("g")
            .attr("fill", "#ffffff")
            .attr("class", "cheImg")
            .append("image")
            .attr("xlink:href", info.materialRackSerialNumber ? cheRack : cheImg)
            .attr("x", x - 15)
            .attr("y", y - 6)
            .attr("width", 30)
            .attr("height", 30)
            .style("transform",`rotate(${rotate}deg)`)
            .style("transform-origin",  centerX + "px " + centerY + "px");
        let lineVal = svgInfo.svg.append("line")
            .attr("x1", x)
            .attr("y1", y + 10)
            .attr("x2", x + 40)
            .attr("y2", y + 10)
            .attr("class", "vehicleLine")
            .attr("stroke", "rgb(255,113,1)")
            .style("stroke-dasharray", "2,2")
            .attr("stroke-width", 2)
            .attr("marker-end", "url(#arrow)")

        svgInfo.vehicleLine.push(lineVal)
    })
    // svgInfo.cheText = svgInfo.svg.selectAll("g")
    //     .select("text")
    //     .attr("class", "cheText")
    //     .data(arr)
    //     .enter()
    //     .append("text")
    //     .text(function (d, e) {
    //         console.log(d,87)
    //         return d.name
    //     })
    //     .attr("x", function (info) {
    //         let x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset)
    //
    //         return x + 20
    //     })
    //     .attr("y", function (info) {
    //         let y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 12
    //         return y + 14
    //     })
    //     .attr("font-size", 20)
    //     .attr("fill", '#fafa32');
    svgInfo.cheText = svgInfo.svg.selectAll("g")
        .select("text")
        .data(arr)
        .enter()
        .append("text")
        .text(function(d, e) {
            return d.name
        })
        .attr("class", "cheText")
            .attr("x", function (info) {
                let x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset)

                return x + 20
            })
            .attr("y", function (info) {
                let y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 12
                return y + 14
            })
        .attr("font-size", 14)
        .attr("fill", '#fafa32');
}

// 目的地

/*
*
*  let x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset),
            y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 12,
            orientationAngle = info.orientationAngle ? -info.orientationAngle : 0
        // 计算 的中心点坐标
        var centerX =x  , centerY =y + 10 ,rotate = info.orientationAngle + 90;
        console.log(rotate,88)
        container = svgInfo.svg.append("g")
            .attr("fill", "#ffffff")
            .attr("class", "cheImg")
            .append("image")
            .attr("xlink:href", info.materialRackSerialNumber ? cheRack : che)
            .attr("x", x - 15)
            .attr("y", y - 6)
            .attr("width", 30)
            .attr("height", 30)
            .style("transform",`rotate(${rotate}deg)`)
            .style("transform-origin",  centerX + "px " + centerY + "px");
* */
function drawSiteLast(info) { 
    d3.selectAll(".gifImg").remove();
    if (info.name) {
        let x = -((info.x ? (svgInfo.height + info.x / multiple) : (svgInfo.height)) + yOffset),
            y = (info.y ? (info.y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew - 12,
            orientationAngle = info.orientationAngle ? -info.orientationAngle : 0,
            container = svgInfo.svg.append("g")
                .attr("fill", "#ffffff")
                .attr("class", "gifImg")
                .append("image")
                .attr("xlink:href", gif)
                .attr("x",x - 15)
                .attr("y",  y - 6)
                .attr("width", 30)
                .attr("height", 30)
                .attr('transform', `rotate(${orientationAngle || 0},${x + xOffset} ,${y + yOffset})`)
    }
}

// 小车行驶路线
function driving(arr, beforeList) {
    let color = ['#f0f090', '#f514ff', '#5f87f1', "#3a1596", "#ffeb3b"],
        containerList = [], routeLinksList = [], beforeLinksList = []
    d3.selectAll(".driving").remove();
    svgInfo.markerLine1 = []
    if (arr && arr.length) {
        for (let i = 0; i < arr.length; i++) {
            let stroke = color[i]
            let y1 = (arr[i].y ? (arr[i].y / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew + 4,
                y2 = (arr[i].y1 ? (arr[i].y1 / multiple + svgInfo.width / 2) : (svgInfo.width / 2)) + yOffsetNew + 4,
                // y1 = arr[i].x1 / multiple +  svgInfo.height + yOffset,
                // x1 = svgInfo.width/2 + arr[i].y1 / multiple + xOffset,
                x1 = -((arr[i].x ? (svgInfo.height + arr[i].x / multiple) : (svgInfo.height)) + yOffset),
                x2 = -((arr[i].x1 ? (svgInfo.height + arr[i].x1 / multiple) : (svgInfo.height)) + yOffset),
                // y2 = arr[i].x / multiple +  svgInfo.height + yOffset ,
                // x2 = svgInfo.width/2 + arr[i].y / multiple + xOffset,
                val = svgInfo.svg.append("line")
                    .attr("class", "driving")
                    .attr("x1", x1)
                    .attr("y1", y1 - 8)
                    .attr("x2", x2)
                    .attr("y2", y2 - 8)
                    .attr("stroke", color[1])
                    .attr("stroke-width", 2)

            // .attr("marker-end", "url(#arrow)")
            svgInfo.markerLine1.push(val)
        }
    }

    svgInfo.container = containerList
    svgInfo.routeLinks = routeLinksList
}
